<template>
  <div class="right_bar">
      <div class="right-item">
          <div class="avatar-border">
              <img src="../../assets/logo.png" alt="">
              <span class="iconfont iconziyuan2"></span>
          </div>
      </div>
      <div class="item-icon">
          <span class="iconfont iconaixinxiantiao" ></span>
          <p>6.2w</p>
      </div>
       <div class="item-icon">
          <span class="iconfont iconpinglun" @click="showCom($event)" ></span>
          <p>1.2w</p>
      </div>
       <div class="item-icon">
          <span class="iconfont iconicon-" ></span>
          <p>3.0w</p>
      </div>
      <div class="right-item">
          <div class="right-music">
              <img src="../../assets/logo.png" alt="">
          </div>
      </div>

  </div>
</template>

<script>
export default {
    props: ["comentShow"],
    methods: {
        showCom(e){
            e.preventDefault()
            this.$emit('changeCom', 1)
        }
    }
};
</script>
<style  scoped>
.right_bar{
    width: 50px;
    z-index: 999;
}
.right_bar .right-item {
    display: flex;
    justify-content: center;
    align-items: center;
}
.right_bar .right-item .avatar-border{
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 50%;
    position: relative;
    margin-bottom: 20px;
}
.right_bar .right-item .avatar-border img{
    width: 100%;
    border-radius: 50%;
}
.right_bar .right-item .avatar-border .iconziyuan2{
    position: absolute;
    top: 25px;
    left: 13px;
    color: #FE2C5A
}
.right_bar .item-icon{
    text-align: center;
    padding-bottom: 20px;
}
.right_bar .item-icon .iconfont{
    color: #ffff;
    font-size: 35px;
    /* padding-bottom: 200px; */
}
.right_bar .item-icon p{
    color: #ffff;
    font-size: 10px;
    padding-top: 5px;
}
.right_bar .right-item .right-music{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #2e2e2e;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: round 6s 0s linear infinite;
}
.right_bar .right-item .right-music img{
    width: 35px;
    border-radius: 50%;
}
@keyframes round {
    from {transform: rotate(0deg)}
    to{transform: rotate(360deg)}
}
</style>